<script type="text/x-template"  id="roleDialogComponent">
<el-dialog :visible.sync="visible" :close-on-click-modal="false" append-to-body>
	    	<el-form ref="form" :model="queryData" label-width="80px">
		    	<el-row :gutter="10">
				  <el-col :span="9">
				  		<el-form-item label="名称">
					  		<el-input v-model="queryData.name" clearable>
							</el-input>
						</el-form-item>
				  </el-col>
				  <el-col :span="9">
				  		<el-form-item label="描述">
					  		<el-input v-model="queryData.description" clearable>
							</el-input>
						</el-form-item>
				  </el-col>
				  <el-col :span="2">
				  	<el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
				  </el-col>
				</el-row>
	    	</el-form>
	    	<div style="margin:10px;">
	    	  <el-table  
	    	    ref="roleInfoDatagrid" 
	    	    :data="datagrid"
			    tooltip-effect="dark"
			    style="width: 100%;"
			    max-height="300"
			    @row-click="selectRow"
			    border
			    highlight-current-row
			    >
			    <el-table-column type="index" width="30"></el-table-column>
				    <el-table-column prop="id" label="角色ID" width="100"> </el-table-column>
				    <el-table-column prop="name" label="角色名称" > </el-table-column>
				    <el-table-column prop="description" label="角色描述" > </el-table-column>
			  </el-table>
			</div>
			<div style="margin:10px">
			    <el-pagination
			      :current-page="queryData.page"
			      :page-sizes="[10, 20, 40, 100]"
			      :page-size="queryData.rows"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="totalNum"
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      @prev-click="handlePrevClick"
			      @next-click="handleNextClick">
			    </el-pagination>
			 </div>
		  <div slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="choseRole">确 定</el-button>
		  </div>
</el-dialog>	
</script>
<script type="text/javascript">
var roleDialogComponentJs = {
		template:'#roleDialogComponent'
		,props: {
			visible:{
				type:Boolean
				,default:false
			}
		}
		,data:function() {
			return {
				queryData:{activeFlag:'1',page:1,rows:5}
				,datagrid:[]
				,totalNum:0
			}
		}
		,methods:{
			selectRow:function(row, event, column){
				this.selectedRow = row;
			}
			,choseRole:function(row, event, column){
				if(!this.selectedRow){
					this.$notify({showClose: true,
				          message: '请选择角色',
				          type: 'info',
				          position: 'bottom-right'});
					return;
				}
				this.$emit('selected',this.selectedRow);
			}
			,query:function(){
				var vm = this
				$.ajax({
					url :staticURL+'/basic/roleInfo/datagrid',
					data : vm.queryData,
					dataType : 'json',
					success : function(json) {
						vm.datagrid = json.rows;
						vm.totalNum = json.total;
						vm.selectedRow = null;
					}
				});
			}
			,handleSizeChange:function(val){
				var app = this;
				app.queryData.rows=val;
				app.query();
			}
			,handleCurrentChange:function(val){
				var app = this;
				app.queryData.page=val;
				app.query();
			}
			,handlePrevClick:function(val){
				var app = this;
				app.queryData.page=val;
				app.query();
			}
			,handleNextClick:function(val){
				var app = this;
				app.queryData.page=val;
				app.query();
			}
		}
		,computed:{
		}
		,watch:{
			visible:function(newValue, oldValue) {
		        this.$emit('update:visible', newValue)
		    }
		}
	}
</script>